<template>
	<view class="container">
		<u-navbar title="订单详情" :border-bottom="false"></u-navbar>
		<view class="container_tit u-flex">
			<u-image v-if="data.info.service_type == 'stick'" src="/pages/pagesPersonal/static/personal/serve_1.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'tag'" src="/pages/pagesPersonal/static/personal/serve_2.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'points'" src="/pages/pagesPersonal/static/personal/company_order_ico_jfcz.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'jlkjxz'" src="/pages/pagesPersonal/static/personal/company_order_ico_jlkjxz.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'setmeal'" src="/pages/pagesPersonal/static/personal/company_order_ico_tcsj.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'emergency'" src="/pages/pagesPersonal/static/personal/company_order_ico_zwjj.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'jobstick'" src="/pages/pagesPersonal/static/personal/company_order_ico_zwzd.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'refresh_job_package'" src="/pages/pagesPersonal/static/personal/company_order_ico_zwznsx.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'resume_package'" src="/pages/pagesPersonal/static/personal/company_order_ico_jlzzb.png"
				width="74" height="82" mode="widthFix"></u-image>
			<u-image v-if="data.info.service_type == 'im'" src="/pages/pagesPersonal/static/personal/company_order_ico_im.png"
				width="74" height="82" mode="widthFix"></u-image>
			<view class="u-m-l-24">
				<view class="u-font-16">{{data.info.service_name}}</view>
				<view class="u-m-t-20 u-font-12">
					{{data.shortDesc}}
				</view>
			</view>
		</view>
		<view class="container_main" v-if="data.info && data.info.extra">
			<view class="container_main_item" v-if="data.info.extra.jobname !== undefined">
				<view>
					推广职位
				</view>
				<view>
					{{data.info.extra.jobname}}
				</view>
			</view>
			<view class="container_main_item" v-if="data.info.extra.tag_text !== undefined">
				<view>
					使用标签
				</view>
				<view>
					{{data.info.extra.tag_text}}
				</view>
			</view>
			<view class="container_main_item">
				<view>
					服务内容
				</view>
				<view>
					{{data.info.service_type_text}}
				</view>
			</view>
			<view class="container_main_item">
				<view>
					服务金额
				</view>
				<view>
					￥{{data.info.service_amount}}
				</view>
			</view>
			<view class="container_main_item" v-if="data.info.extra.preferential_info !== undefined">
				<view>
					限时特惠
				</view>
				<view>
					￥{{data.info.extra.preferential_info.amount}}
					<text style="color:#999999">
						({{ $u.timeFormat(data.info.extra.preferential_info.starttime)}} 至
						{{ $u.timeFormat(data.info.extra.preferential_info.endtime)}})
					</text>
				</view>
			</view>
			<view class="container_main_item" v-if="data.info.extra.coupon_info !== undefined">
				<view>
					优惠券
				</view>
				<view>
					{{data.info.extra.coupon_info.name}}
				</view>
			</view>
			<view class="container_main_item" v-if="data.info.extra.coupon_info !== undefined">
				<view>
					优惠券抵扣
				</view>
				<view>
					- {{data.info.extra.coupon_info.face_value}}
				</view>
			</view>
			<view class="container_main_item" v-if="
			  data.info.extra.service_added_discount !== undefined &&
			    data.info.extra.service_added_discount > 0
			">
				<view>
					专享折扣
				</view>
				<view>
					增值服务{{ data.info.extra.service_added_discount }}折
				</view>
			</view>
			<view class="container_main_item" v-if="
              data.info.extra.service_added_discount !== undefined &&
                data.info.extra.service_added_discount > 0
            ">
				<view>
					折扣金额
				</view>
				<view>
					￥{{data.info.service_amount_after_discount}}
				</view>
			</view>
			<view class="container_main_item" v-if="data.info.deduct_points > 0">
				<view>
					积分折扣
				</view>
				<view>
					- {{data.info.deduct_amount}}
				</view>
			</view>
			<view class="container_main_item" v-if="data.service_type == 'points'">
				<view>
					充值积分
				</view>
				<view>
					{{data.info.extra.add_points}}积分
				</view>
			</view>
			<view class="container_main_item">
				<view>
					应付金额
				</view>
				<view class="amount">
					￥{{data.info.amount}}
				</view>
			</view>
		</view>
		<u-gap height="10" bg-color="#F2F2F2"></u-gap>
		<view class="container_orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="container_orderInfo_item">
				订单编号：{{data.info.oid}}
			</view>
			<view class="container_orderInfo_item">
				创建时间：{{$u.timeFormat(data.info.addtime,'yy-mm-dd hh:MM:ss')}}
			</view>
			<view class="container_orderInfo_item">
				付款时间：{{$u.timeFormat(data.info.paytime,'yy-mm-dd hh:MM:ss')}}
			</view>
			<view class="container_orderInfo_item" v-if="data.info.payment">
				支付渠道：{{data.info.payment_text || '无'}}
			</view>
		</view>
		<u-gap height="10" bg-color="#F2F2F2"></u-gap>
		<view class="container_btn">
			<view v-if="data.info.status == 0" class="u-flex">
				<u-button shape="circle" @click="data.isCancel = true">取消订单</u-button>
				<u-button :hair-line="false" hover-class="none" :customStyle="data.customStyle" shape="circle" @click="data.isCashier = true">立即支付</u-button>
			</view>
			<u-button v-if="data.info.status == 2" shape="circle" @click="data.isDel = true">删除订单</u-button>
		</view>

		<u-modal v-model="data.isCancel" title="系统提示" content="确定取消该订单吗" show-cancel-button confirm-text="确定"
			@confirm="$u.throttle(submitCancel,1000)"></u-modal>
		<u-modal v-model="data.isDel" title="系统提示" content="确定删除该订单吗" show-cancel-button confirm-text="确定"
			@confirm="$u.throttle(submitDel,1000)"></u-modal>
		<!-- 收银台 -->
		<u-cashier :modelValue="data.isCashier" :payItem="data.item" @confirm="paySubmit"
			@close="data.isCashier = false"></u-cashier>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from "vue";
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		info: {},
		isCancel: false,
		isDel: false,
		isCashier: false,
		shortDesc: '',
		customStyle:{
			backgroundColor: '#00D075',
			color: '#fff',
			border: 'none'
		}
	})
	onLoad(({
		id
	}) => {
		getOrderDetail(id)
	})
	const getOrderDetail = async (id) => {
		let params = {
			id
		}
		if (data.utype == 1) {
			data.info = await uni.$u.api.company_orderdetail({
				params
			})
		} else {
			data.info = await uni.$u.api.orderDetail({
				params
			})
		}
		data.shortDesc = filterDesc(data.info)

	}
	const filterDesc = (info) => {
		let return_str = ''
		switch (info.service_type) {
			case 'points':
				return_str =
					'做任务免费得积分，小积分大用处'
				break
			case 'setmeal':
				return_str = '套餐服务期：' + info.extra.days + '天'
				break
			case 'jobstick':
				return_str = '锁定好位，提高职位曝光量'
				break
			case 'emergency':
				return_str = '急聘职位优先推荐，专属标识'
				break
			case 'resume_package':
				return_str = '超值简历下载叠加包'
				break
			case 'im':
				return_str = '超值职聊次数叠加包'
				break
			case 'refresh_job_package':
				return_str = '自动抢占招聘先机'
				break
			case 'single_job_refresh':
				return_str = '单次刷新职位-快捷支付'
				break
			case 'single_resume_down':
				return_str = '单次下载简历-快捷支付'
				break
			case 'stick':
			case 'tag':
				return_str = ''
				break
		}
		return return_str
	}
	// 删除订单
	const submitDel = async () => {
		let params = {
			id: data.info.id
		}
		if (data.utype == 1) {
			await uni.$u.api.company_order_del(params)
		} else {
			await uni.$u.api.orderDel(params)
		}
		uni.$u.toast('删除成功')
		uni.$u.route({
			type: 'back'
		})
	}
	// 立即支付
	const paySubmit = async (value) => {
		let params = {
			id: data.info.id,
			payment: value == 1 ? 'wxpay' : 'alipay'
		}
		let orderInfo
		if (data.utype == 1) {
			orderInfo = await uni.$u.api.company_repay(params)
		} else {
			orderInfo = await uni.$u.api.repay(params)
		}
		// #ifndef H5
		// 拉起收银台
		uni.requestPayment({
			provider: params.payment,
			orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
			success(res) {
				uni.$u.toast('支付成功')
				data.isCashier = false
				uni.$u.route({
					type: 'back'
				})
			},
			fail(err) {
				uni.$u.toast('您已取消支付')
			}
		});
		// #endif
		// #ifdef H5
		uni.$u.toast('暂不支持')
		// #endif
	}
	// 取消订单
	const submitCancel = async () => {
		let params = {
			id: data.info.id
		}
		if (data.utype == 1) {
			await uni.$u.api.company_order_cancel(params)
		} else {
			await uni.$u.api.orderCancel(params)
		}
		uni.$u.toast('取消成功')
		uni.$u.route({
			type: 'back'
		})
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.amount {
		color: #FD2828;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.container {
		color: #101010;
		font-size: 28rpx;

		&_tit {
			background-color: #fff;
			width: 648rpx;
			height: 174rpx;
			margin: 0 auto;
			box-shadow: 0px 4rpx 12rpx 0px rgba(213, 203, 203, 40);
			margin-top: 26rpx;
			padding: 48rpx;
		}

		&_main {
			margin-top: 48rpx;
			padding: 0 48rpx;

			&_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;
			}
		}

		&_orderInfo {
			padding: 24rpx 48rpx;

			&_item {
				margin-top: 26rpx;
			}
		}

		&_btn {
			padding: 48rpx;
		}
	}
</style>